import React, { useEffect, useState } from 'react'
import { getHousesListAPI } from '../../api'
import { Link, useNavigate } from 'react-router-dom'
import { serverurl } from '../../utils/request'
import NavHeader from '../../components/NavHeader/index'
import styles from './index.module.css'
import './index.scss'

function HouseList() {
  const navigate = useNavigate()
  // 获取到当前城市的id值
  const { value } = JSON.parse(localStorage.getItem('hkzf_city'))

  // 小区房源数据
  const [houseList, setHouseList] = useState([])

  // 获取该城市的房源数据
  const getHousesListFn = async () => {
    const { data: res } = await getHousesListAPI(value)
    console.log('房屋列表', res.body.list)
    setHouseList(res.body.list)
  }
  useEffect(() => {
    getHousesListFn() // 调用获取城市房源数据的方法
  }, [])
  return (
    <div className="houseContainer">
      <NavHeader title="房屋查询"></NavHeader>
      {/* 右侧地图图标 */}
      <i className="iconfont icon-map" onClick={() => navigate('/map')}></i>

      {/* 房屋列表 */}
      <div className={styles.houseList}>
        {houseList.map((item) => (
          <div
            className={styles.houseItems}
            key={item.houseCode}
            onClick={() => navigate(`/detail?id=${item.houseCode}`)}
          >
            {/* 房屋结构 */}
            <div className={styles.house}>
              <div className={styles.imgWrap}>
                <img
                  className={styles.img}
                  src={serverurl + item.houseImg}
                  alt=""
                />
              </div>
              <div className={styles.content}>
                <h3 className={styles.title}>{item.title}</h3>
                <div className={styles.desc}>{item.desc}</div>
                <div className={styles.tags}>
                  {/* 渲染标签 */}
                  {item.tags.map((tag, index) => {
                    const classTag = 'tag' + (index + 1)
                    return (
                      <span className={[styles[classTag]].join('')} key={tag}>
                        {tag}
                      </span>
                    )
                  })}
                </div>
                <div className={styles.price}>
                  <span className={styles.priceNum}>{item.price}</span> 元/月
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default HouseList
